<template>
  <div class="red-blue-green">
    <table
      class="width100 border font20 text-center bg-white"
      style="word-break: break-all"
    >
      <tbody>
        <tr class="bg-red p-t10 p-b10">
          <td class="light-yellow">红波</td>
          <td class="light-yellow">
            {{ props.redWaves.join('.') }}
          </td>
          <td class="yellow">龙龙</td>
          <td class="yellow">兔兔</td>
          <td class="yellow">虎虎</td>
          <td class="yellow">牛牛</td>
          <td class="yellow">鼠鼠</td>
          <td class="yellow">猪猪</td>
        </tr>
        <tr class="bg-blue p-t10 p-b10">
          <td class="light-yellow">蓝波</td>
          <td class="light-yellow">
            {{ props.blueWaves.join('.') }}
          </td>
          <td class="yellow">对冲</td>
          <td class="yellow">对冲</td>
          <td class="yellow">对冲</td>
          <td class="yellow">对冲</td>
          <td class="yellow">对冲</td>
          <td class="yellow">对冲</td>
        </tr>
        <tr class="bg-green p-t10 p-b10">
          <td class="light-yellow">绿波</td>
          <td class="light-yellow">
            {{ props.greenWaves.join('.') }}
          </td>
          <td class="yellow">狗狗</td>
          <td class="yellow">鸡鸡</td>
          <td class="yellow">猴猴</td>
          <td class="yellow">羊羊</td>
          <td class="yellow">马马</td>
          <td class="yellow">蛇蛇</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  redWaves: {
    type: Array,
    default: () => [],
  },
  blueWaves: {
    type: Array,
    default: () => [],
  },
  greenWaves: {
    type: Array,
    default: () => [],
  },
});
</script>
